<template>
    <div class="help">
        <top-bar :isBlack="true" title="帮助与反馈"></top-bar>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
            <div class="list-wrapper">
                <div v-for="item in list" :key="item.id" class="list-item" @click="goDetail(item)">
                    <div class="item-header">
                        <!-- <img src="@/assets/icon_01.png" alt="" class="portrait" />
            <div class="item-info">
              <p class="name">刘亚丽</p>
              <p class="job">职位:工程师</p>
            </div> -->
                        <div class="type">
                            <img src="@/assets/icon_05.png" alt="" class="type-icon" />
                            <p class="type-info">{{ item.cate.title }}</p>
                        </div>
                    </div>
                    <p class="question">
                        {{ item.title }}
                    </p>
                    <div class="status-wrapper">
                        <p class="time">{{ item.created_at }}</p>
                        <p class="status" :class="{ already: item.status }">
                            {{ item.status ? "已回复" : "待回复" }}
                        </p>
                    </div>
                    <div class="reply" v-if="item.reply">
                        <p class="label">回复：</p>
                        <p>
                            {{ item.reply }}
                        </p>
                    </div>
                </div>
            </div>
        </van-list>
        <div class="btn-wrapper">
            <van-button color="#224448" block @click="goReturn">返回</van-button>
        </div>
    </div>
</template>

<script>
import TopBar from "@/components/topBar.vue";
export default {
    name: "help",
    data() {
        return {
            list: [],
            loading: true,
            finished: false,
            page: 0,
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            this.$api
                .helps({
                    page: ++this.page,
                })
                .then((res) => {
                    this.loading = false;
                    if (res.status_code == 200) {
                        this.list.push(...res.data.data);
                        if (this.list.length >= res.data.total) {
                            this.finished = true;
                        }
                    }
                });
        },
        goDetail(val) {
            this.$router.push({
                path: "/helpDetail",
                query: {
                    info: JSON.stringify(val),
                },
            });
        },
        goReturn() {
            this.$router.go(-1);
        },
    },
    components: {
        TopBar,
    },
};
</script>

<style lang="scss">
.help {
    .van-button {
        height: 54px;
    }
    .van-button--normal {
        font-size: 16px;
    }
}
</style>
<style lang="scss" scoped>
.help {
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background-color: #fff;
    overflow-y: auto;
    padding-bottom: 56px;
    .list-wrapper {
        background-color: #f4f4f4;
        padding-bottom: 10px;
        &::before {
            display: table;
            content: "";
        }
        .list-item {
            background-color: #fff;
            margin-top: 10px;
            padding: 20px 15px;
            padding-top: 14px;
            position: relative;
            .item-header {
                display: flex;
                padding-bottom: 10px;
                border-bottom: 1px solid #f4f4f4;
                margin-bottom: 20px;
                // align-items: center;
                .portrait {
                    width: 40px;
                    height: 40px;
                    border-radius: 10px;
                    margin-right: 20px;
                }

                .item-info {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .name {
                        font-size: 14px;
                        font-weight: bold;
                        color: #333333;
                    }

                    .job {
                        font-size: 13px;
                        color: #666666;
                    }
                }

                .type {
                    // position: absolute;
                    // top: 19px;
                    // right: 15px;
                    display: flex;
                    align-items: center;
                    // flex-direction: column;
                    // align-items: center;
                    // justify-content: space-between;
                    // height: 40px;
                    .type-icon {
                        width: 15px;
                        height: 18px;
                        object-fit: contain;
                        margin-right: 15px;
                    }

                    .type-info {
                        font-size: 13px;
                        color: #224448;
                    }
                }
            }

            .question {
                padding-right: 8px;
                font-size: 13px;
                color: #333333;
                line-height: 20px;
                word-break: break-all;
                margin-bottom: 13px;
            }

            .status-wrapper {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .time {
                    font-size: 13px;
                    color: #333333;
                }

                .status {
                    font-size: 14px;
                    color: #e8542c;
                    &.already {
                        color: #b4b4b4;
                    }
                }
            }

            .reply {
                margin-top: 11px;
                background: #f4f4f4;
                border-radius: 10px;
                padding: 15px 19px 15px 15px;
                word-break: break-all;
                .label {
                    margin-bottom: 10;
                }
                p {
                    font-size: 13px;
                    font-weight: 500;
                    color: #333333;
                    line-height: 20px;
                }
            }
        }
    }

    .btn-wrapper {
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
    }
}

@media screen and (min-width: 750px) {
    .help {
        width: 750px;
        left: 50%;
        transform: translateX(-50%);

        .list-wrapper {
            .list-item {
                .item-header {
                    .type {
                        .type-icon {
                            width: 20px;
                            height: 20px;
                        }
                        .type-info {
                            font-size: 20px;
                        }
                    }
                }

                .question {
                    font-size: 20px;
                }

                .status-wrapper {
                    .time {
                        font-size: 18px;
                    }
                    .status {
                        font-size: 18px;
                    }
                }
                .reply {
                    p {
                        font-size: 20px;
                    }
                }
            }
        }
    }
}
</style>
